@use 'sass:color';
@use '@angular/material' as mat;

@mixin ngm-story-point($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);

  $grid-divider: 1px dashed map-get($foreground, divider);

  %widget-editable {
    border-color: map-get($accent, 500);
    .ngm-drag-handler {
      background-color: mat.get-color-from-palette($foreground, divider);
    }
  }

  .ngm-story-point {
    // transition: all 500ms cubic-bezier(0.35, 0, 0.25, 1);

    &:not(.ngm-story-point__multi-layer) {
      .ngm-story__widget.active:not(.ngm-fullscreen) {
        // 之前注释掉是因为影响到了多层部件下的上下关系???
        z-index: 2 !important;
      }
    }

    .ngm-story__widget {
      &.active {
        .ngm-story-widget__fab-menu {
          visibility: visible;
        }
      }

      &.ngm-fullscreen {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        z-index: 1000 !important;
        
        .ngm-story-widget__fab-menu {
          right: 0;
          opacity: .2;
          &:hover {
            opacity: 1;
          }
        }
      }

      &:not(.ngm-fullscreen) {
        border: 1px dashed transparent;

        &.active.editable {
          @extend %widget-editable;
        }
        &:hover.editable:not(.active) {
          border-color: color.change(map-get($accent, 500), $alpha: 0.5);
        }
      }
      
    }
  }

  /* gridster 网格样式 */
  gridster.ngm-story__layout {
    overflow: visible;

    &.gridSize:not(.fit) {
      margin: auto;
    }
    &.display-grid {
      .ngm-story__widget {
        border-color: map-get($foreground, divider);
      }
    }
    
    .gridster-column {
      border-left: $grid-divider;
      border-right: $grid-divider;
    }

    .gridster-row {
      border-top: $grid-divider;
      border-bottom: $grid-divider;
    }

    .gridster-item-resizable-handler:hover {
      background-color: map-get($foreground, divider);
    }

    .gridster-preview {
      background-color: map-get($foreground, divider);
    }
  }

  @media print {
    header, footer, aside, form {
      display: none;
    }
  }

  .ngm-story-point__responsive {
    min-height: 100%;
  }
}
